<template>
	<svg
		width="60%"
		viewBox="0 0 188.59948 31.004201"
		version="1.1"
		ref="titlesvg"
		class="titlesvg"
		inkscape:version="1.1 (c68e22c387, 2021-05-23)"
		sodipodi:docname="云梯创客训练营.svg"
		xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
		xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:svg="http://www.w3.org/2000/svg"
	>
		<sodipodi:namedview
			id="namedview7"
			pagecolor="#ffffff"
			bordercolor="#666666"
			borderopacity="1.0"
			inkscape:pageshadow="2"
			inkscape:pageopacity="0.0"
			inkscape:pagecheckerboard="0"
			inkscape:document-units="px"
			showgrid="false"
			inkscape:zoom="0.35355339"
			inkscape:cx="165.46299"
			inkscape:cy="-130.10765"
			inkscape:window-width="1366"
			inkscape:window-height="705"
			inkscape:window-x="-8"
			inkscape:window-y="-8"
			inkscape:window-maximized="1"
			inkscape:current-layer="layer1"
			units="px"
			width="600px"
			inkscape:snap-global="false"
		/>
		<defs id="defs2">
			<rect x="150" y="332" width="434" height="234" id="rect2165" />
			<clipPath clipPathUnits="userSpaceOnUse" id="clipPath13701">
				<text
					xml:space="preserve"
					style="font-size:70.2342px;line-height:0.95;font-family:sans-serif;word-spacing:0px;display:inline;stroke-width:0.319246"
					x="72.425987"
					y="68.662056"
					id="text13711"
				>
					<tspan
						sodipodi:role="line"
						id="tspan13703"
						style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:70.2342px;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.319246"
						x="72.425987"
						y="68.662056"
					>
						平
					</tspan>
					<tspan
						sodipodi:role="line"
						style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:70.2342px;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.319246"
						x="72.425987"
						y="137.15343"
						id="tspan13705"
					>
						安
					</tspan>
					<tspan
						sodipodi:role="line"
						style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:70.2342px;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.319246"
						x="72.425987"
						y="205.64481"
						id="tspan13707"
					>
						健
					</tspan>
					<tspan
						sodipodi:role="line"
						style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:70.2342px;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.319246"
						x="72.425987"
						y="274.13617"
						id="tspan13709"
					>
						康
					</tspan>
				</text>
			</clipPath>
			<clipPath clipPathUnits="userSpaceOnUse" id="clipPath18707">
				<path
					style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
					d="m 75.141666,76.596874 -2.196401,-0.01738 c -2.936939,-7.517325 -3.964258,-13.034938 -3.756724,-18.106575 2.365211,-6.921931 3.883115,-14.549948 8.202083,-19.84375 0,0 -2.124387,-4.174902 3.042709,-6.217708 5.688541,-2.248958 12.965065,-2.677771 14.022916,-2.645833 3.783846,0.114244 7.567871,0.228256 10.318751,1.719791 0,0 7.13968,-1.696561 14.2875,-1.5875 9.55656,0.145818 13.73371,-0.898797 13.36145,-1.058333 1.25507,-2.484738 3.21778,-3.200351 5.15938,-3.96875 5.58101,-0.666874 10.59738,-0.20448 14.41979,2.645833 0.39362,-0.787243 2.40628,5.311376 3.175,6.085417 1.20706,1.215414 0.90447,8.264636 -0.26458,8.069792 2.3765,4.674306 4.79239,9.34861 4.7625,14.022916 0.16579,4.377367 0.80354,9.541312 0,12.303125 l -0.79375,6.085417 c -0.53396,2.543278 -1.15149,4.835829 -2.38126,5.291666 l -7.67291,5.820834 -7.27604,2.38125 6.48229,11.773958 c 0.86271,1.829476 1.29278,2.449016 1.45521,4.365626 -0.49105,1.9455 -1.45795,3.6055 -3.70417,4.49791 -0.87462,0.95537 -1.48302,2.44207 -6.87916,3.04271 -0.46852,1.1713 -5.77275,-3.42751 -8.33437,-7.54062 -2.13047,-3.42084 -7.14376,-11.509376 -7.14376,-11.509376 l -10.71562,-0.79375 -3.04271,0.926042 -5.15937,-0.264584 -2.24896,4.101042 c -1.15933,1.964476 -2.06701,3.467402 -3.439586,5.159366 l -2.38125,5.42396 -4.365625,3.70417 c -3.219098,0.61193 -7.231946,-0.87714 -10.451041,-3.43958 -2.678322,-2.60786 -2.779758,-5.68424 -1.5875,-8.995833 l 3.439583,-6.746875 2.116667,-3.836458 1.190625,-1.322917 -1.5875,-0.926041 C 81.606471,84.358755 82.374671,83.613635 80.830208,82.153124 L 78.184374,81.227083 C 77.056061,79.752126 76.231067,79.65622 76.861458,77.126041 Z"
					id="path18709"
					sodipodi:nodetypes="ccccsscscccscccccccccccscccccccccccccccccc"
				/>
			</clipPath>
			<rect x="150" y="332" width="434" height="234" id="rect14130" />
			<rect x="150" y="332" width="434" height="234" id="rect31535" />
			<rect x="150" y="332" width="434" height="234" id="rect31574" />
			<linearGradient inkscape:collect="always" id="linearGradient40692">
				<stop style="stop-color:#744a1f;stop-opacity:1" offset="0" id="stop40688" />
				<stop style="stop-color:#db9248;stop-opacity:1" offset="1" id="stop40690" />
			</linearGradient>
			<linearGradient
				inkscape:collect="always"
				xlink:href="#linearGradient40692"
				id="linearGradient1022"
				x1="193.54622"
				y1="74.831726"
				x2="196.63019"
				y2="82.689453"
				gradientUnits="userSpaceOnUse"
			/>
			<filter inkscape:collect="always" style="color-interpolation-filters:sRGB" id="filter26024" x="-0.20217637" y="-0.24217082" width="1.4043527" height="1.4843416">
				<feGaussianBlur inkscape:collect="always" stdDeviation="21.022032" id="feGaussianBlur26026" />
			</filter>
		</defs>
		<g inkscape:label="图层 1" inkscape:groupmode="layer" id="layer1" transform="translate(-12.486144,-175.70252)">
			<text
				xml:space="preserve"
				style="font-size:17.3194px;line-height:1.25;font-family:sans-serif;letter-spacing:4.32985px;word-spacing:0px;display:inline;stroke-width:0.264583"
				x="54.242798"
				y="199.96883"
				id="text29724"
			>
				<tspan
					sodipodi:role="line"
					id="tspan29722"
					style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.264583"
					x="60.242798"
					y="199.96883"
				>
					 飓 云 精选题
				</tspan>
			</text>
			<g id="g6526" transform="matrix(0.08903795,0,0,0.08493472,37.413761,177.98387)" style="stroke-width:11.4992">
				<rect
					style="display:inline;opacity:0.9;fill:#8b6800;fill-opacity:1;stroke-width:18.0908;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
					id="rect3185"
					width="26.056862"
					height="143.66226"
					x="68.810913"
					y="176.85654"
					rx="78.932579"
					ry="70.237823"
					transform="matrix(1,0,-0.50226326,0.86471476,0,0)"
				/>
				<path
					id="path18179"
					style="display:inline;mix-blend-mode:normal;fill:#153e63;fill-opacity:1;stroke-width:11.4992;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter26024)"
					d="M 923.9375,81.375 A 398.43745,398.43745 0 0 0 525.5,479.8125 398.43745,398.43745 0 0 0 533.30469,556.92578 329.68751,329.68751 0 0 0 514.5625,556.375 329.68751,329.68751 0 0 0 184.875,886.0625 a 329.68751,329.68751 0 0 0 285.33008,325 H 639.22461 V 1056.8281 H 592.39258 A 239.6641,239.6641 0 0 1 384.97461,820.57227 239.6641,239.6641 0 0 1 624.63867,580.9082 a 239.6641,239.6641 0 0 1 13.625,0.40039 A 289.64142,289.64142 0 0 1 632.58984,525.25 289.64142,289.64142 0 0 1 922.23047,235.60938 289.64142,289.64142 0 0 1 1211.873,525.25 a 289.64142,289.64142 0 0 1 -5.6308,55.82422 239.6641,239.6641 0 0 1 4.4941,-0.16602 239.6641,239.6641 0 0 1 239.6641,239.66407 239.6641,239.6641 0 0 1 -211.8692,236.25583 h -197.6699 v 154.2344 h 318.1856 a 329.68751,329.68751 0 0 0 291.4531,-325 329.68751,329.68751 0 0 0 -329.6875,-329.6875 329.68751,329.68751 0 0 0 -6.1816,0.23047 398.43745,398.43745 0 0 0 7.7441,-76.79297 A 398.43745,398.43745 0 0 0 923.9375,81.375 Z"
					transform="matrix(0.26622499,0,0,0.21769232,-250.29816,14.980918)"
				/>
				<rect
					style="display:inline;fill:#ff8600;fill-opacity:1;stroke-width:18.0908;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
					id="rect1656"
					width="26.056862"
					height="143.66226"
					x="64.854126"
					y="174.40872"
					rx="78.932579"
					ry="70.237823"
					transform="matrix(1,0,-0.50226326,0.86471476,0,0)"
				/>
				<rect
					style="display:inline;opacity:0.9;fill:#8b6800;fill-opacity:1;stroke-width:14.027;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
					id="rect3701"
					width="22.380991"
					height="100.55428"
					x="143.46449"
					y="213.79729"
					rx="78.932579"
					ry="47.238297"
					transform="matrix(1,0,-0.46566245,0.88496242,0,0)"
				/>
				<rect
					style="display:inline;fill:#ff8600;fill-opacity:1;stroke-width:14.027;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
					id="rect1747"
					width="22.380991"
					height="100.55428"
					x="139.87971"
					y="211.85439"
					rx="78.932579"
					ry="47.238297"
					transform="matrix(1,0,-0.46566245,0.88496242,0,0)"
				/>
				<path
					id="path28283"
					style="display:inline;mix-blend-mode:normal;fill:#153e63;fill-opacity:1;stroke-width:11.4992;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter26024)"
					d="m 470.54297,1002.7266 -80.86719,91.3496 74.18555,42.9511 5.40429,73.8594 a 329.68751,329.68751 0 0 0 0.93946,0.1758 h 169.01953 v -154.2344 h -46.83203 a 239.6641,239.6641 0 0 1 -121.84961,-54.1015 z"
					transform="matrix(0.26622499,0,0,0.21769232,-250.29816,14.980918)"
				/>
			</g>
		</g>
	</svg>
</template>

<script setup>
import * as d3 from 'd3';
import { ref, onMounted } from 'vue';
const titlesvg = ref();
const refreshSvg = () => {
	let winWidth2 = document.documentElement.clientWidth;
	let winWidth = document.body.clientWidth;
	let titlesvg1 = d3.select('.titlesvg');
	//缺省为高度80
	titlesvg1.attr('height', 80);
	titlesvg1.attr('width', null);
	//如果宽度超出了，再按宽度来设置
	let svgWidth = titlesvg.value.clientWidth;
	if (svgWidth + 30 > winWidth) {
		titlesvg1.attr('width', winWidth - 50);
		titlesvg1.attr('height', null);
	}
};
onMounted(() => {
	refreshSvg();
	window.onresize = () => {
		refreshSvg();
		console.log(1);
	};
});
</script>

<style></style>
